<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--头部固定引用-->
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/pop-ups.css"><!--弹出层-->
    <link rel="stylesheet" href="../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../css/report-list.css"/><!--研报列表-->
    <!--固定引用结束,自定义引用添加在下面-->
    <link rel="stylesheet" href="../plugin/mescroll/css/mescroll.min.css">
    <title>研究</title>
    <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
    <style>

        .nav-bar-search {
            margin-left: .32rem;
            width: 6.86rem;
            padding: .14rem 0;
            color: rgba(34, 34, 34, 0.38);
        }

        .nav-bar-item {
            background: rgba(242, 242, 242, 1);
            border-radius: 16px;
            width: 100%;
            height: .6rem;
        }

        .nav-bar-input {
            padding: 0 .04rem;
            width: 100%;
        }

        .nav-bar-item span {
            height: .6rem;
            line-height: .6rem
        }

        .nav-bar-search span {
            margin-left: .24rem;
            color: rgba(183, 183, 183, 1);
        }

        .nav-bar-search i {
            margin-right: .26rem;
        }

        .research-head-box {
            height: .92rem;
            padding: 0 .32rem;
            background: white;
        }

        .research-head-jrgs {
            margin-top: .34rem;
            margin-bottom: .06rem;
        }

        .research-head-til {
            height: .92rem;
            line-height: .92rem;
            color: rgba(34, 34, 34, 1);
        }

        .research-head-more {
            height: .36rem;
            line-height: .36rem;
            color: rgba(34, 34, 34, 0.7);
        }

        .research-head-more span {
            margin-left: .12rem;
            color: rgba(153, 153, 153, 0.6);
        }

        /*************三级菜单选择器**开始**************/
        .inside-child {
            overflow-x: scroll;
            overflow-y: hidden;
        }

        .menu-inside-warp {
            height: 0.76rem;
            top: 0.88rem;
            z-index: 1;
            overflow: hidden;
            /*padding-left: 0.32rem;*/
            padding-bottom: 0.16rem;
            background: rgba(255, 255, 255, 1);
        }

        .menu-inside-warp .menu-inside-column {
            left: 0;
            top: 0;
            width: 7.5rem;
            height: 0.6rem;
            padding-right: .32rem;
            padding-left: .32rem;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            display: flex;
            -webkit-overflow-scrolling: touch;
        }

        .menu-inside-warp .menu-inside-column div:last-child {
            padding-right: .32rem;
        }

        .menu-inside-warp .menu-inside-column .menu-inside-item {
            padding: 0 .16rem;
        }

        .menu-inside-warp .menu-inside-column div:first-child {
            margin-left: 0;
        }

        .menu-inside-warp .menu-inside-column .menu-inside-item {
            padding: 0 .28rem;
            height: .56rem;
            line-height: .56rem;
            margin: 0 .1rem;
            color: rgba(34, 34, 34, 0.45);
            background: rgba(244, 244, 244, 1);
            border-radius: 1rem;
        }

        .menu-inside-warp .menu-inside-column .active {
            color: rgba(44, 104, 255, 1);
            background: rgba(44, 104, 255, 0.13);
            font-weight: bold;
        }

        /*************三级菜单选择器**结束**************/

        .industry-project-wrap {
            padding: .08rem .32rem 0.36rem .32rem;
            background: rgba(255, 255, 255, 1);
        }

        .industry-project-item {
            width: 2.08rem;
            height: 2.4rem;
            background: rgba(5, 8, 8, 1);
            border-radius: 4px;
        }

        .industry-project-item img {
            width: 2.08rem;
            height: 2.4rem;
            border-radius: 4px;
        }

        .industry-project-name {
            left: .2rem;
            top: .16rem;
            line-height: 20px;
            color: rgba(255, 255, 255, 1);
        }


        .index-report-special-wrap {
            width: 100%;
        }

        .index-report-special-content {
            overflow-x: scroll;
            overflow-y: hidden;
        }

        .index-report-special-content div:last-child {
            /*margin-right: .32rem;*/
        }

        .index-report-special-content div:first-child {
            margin-left: .32rem;
        }

        .index-report-special-item {
            margin-right: 0.32rem;
            border-radius: 0.1rem;
            width: 1.7rem;
            height: 2.24rem;
        }

        .index-report-special-box {
            width: 1.7rem;
        }

        .index-report-special-item-pdf {
            width: .6rem;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 0.06rem 0;
            color: white;
            padding: 0.04rem 0.08rem;
        }

        .index-report-data-sources {
            margin-top: 0.64rem;
            width: 100%;
        }

        .index-report-data-content {
            overflow-x: scroll;
            overflow-y: hidden;
        }

        .index-report-data-content div:first-child {
            /*margin-left: .32rem;*/
        }

        .index-report-data-content div:last-child {
            /*margin-right: .32rem;*/
        }

        .index-report-list {
            max-height: 8.22rem;
        }

        .index-report-list-item {
            padding: 0.36rem .32rem;
        }

        .index-report-tab {
            margin-right: 0.2rem;
            background: rgba(244, 244, 244, 1);
            border-radius: 15px;
            padding: 0 .24rem;
            line-height: .56rem;
            height: .56rem;
            white-space: nowrap;
        }

        .index-report-tab-active {
            color: #2C68FF;
            background: rgba(44, 104, 255, 0.13);
        }

        .index-report-tab-line {
            border-radius: 0.03rem;
            background-color: #2C68FF;
            width: 0.36rem;
            height: 0.06rem;
            margin-top: 0.06rem;
        }

        .research-industry-wrap {
            flex-wrap: wrap;
            display: flex;
            padding: .2rem .18rem;
            background: rgba(247, 248, 252, 1);
        }

        .research-industry-item {
            width: 2.1rem;
            height: 1.64rem;
            background: rgba(255, 255, 255, 1);
            border-radius: 4px;
            margin: .12rem .14rem;
            padding: .08rem;
        }

        .research-industry-item img {
            width: .64rem;
            height: .64rem;
            margin-bottom: .04rem;
        }

        .research-industry-item div {
            line-height: .4rem;
            width: 100%;
            text-align: center;
        }

        .research-stock-wrap {
            padding: 0 .32rem;
            margin-bottom: .98rem;
        }

        .research-stock-bg {
            width: 100%;
            height: 130px;
            background: rgba(29, 104, 192, 1);
            border-radius: 4px 4px 0px 0px;
        }

        .research-stock-bg img {
            width: 100%;
            height: 130px;
            background: rgba(29, 104, 192, 1);
            border-radius: 4px 4px 0px 0px;
        }

        .research-stock-box {
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
            padding: .18rem .24rem .26rem .24rem;
        }

        .research-stock-item {
            padding: .14rem 0;
        }

        .research-stock-icon {
            color: rgba(0, 0, 0, 1);
        }

        .research-stock-title {
            line-height: .4rem;
            color: rgba(34, 34, 34, 1);
            margin-left: .2rem;
        }
    </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>

<div class="flex-column h-100-p bg-white">

    <!--状态栏-->
    <div class="bg-main status-bar"></div>
    <!--导航栏-->
    <div class="bg-main nav-bar flex-row justify-content-between c-white align-items-center">
        <div class="flex-row justify-content-between align-items-center nav-bar-search" onclick="goSearch()">
            <div class="flex-row align-items-center nav-bar-item" onclick="goSearch()">
                <span class="iconfont iconsousuo-01 fs13"></span>
                <div class="flex-row align-items-center nav-bar-input ml10 ff400 fs13">请输入您感兴趣的内容</div>
            </div>
        </div>
    </div>

    <div class="flex-1 mescroll" id="mescroll">
        <!--行业专题-->
        <div class="flex-row justify-content-between align-items-center research-head-box">
            <div class="research-head-til fs16 ff500">投研深度专题</div>
            <div class="flex-row research-head-more fs13 ff400" onclick="goMoreIndustry()">
                <div>更多</div>
                <span class="iconfont iconfanhui fs11"></span>
            </div>
        </div>
        <div class="flex-row justify-content-between industry-project-wrap"></div>

        <!--产业链图谱-->
        <div class="flex-row justify-content-between align-items-center research-head-box">
            <div class="research-head-til fs16 ff500">产业链图谱</div>
            <div class="flex-row research-head-more fs13 ff400" onclick="goIndustrialMap()">
                <div>更多</div>
                <span class="iconfont iconfanhui fs11"></span>
            </div>
        </div>
        <div class="flex-column">
            <!--三级菜单栏目选择器-->
            <div class="flex-row bg-white menu-inside-warp">
                <div class="flex-row align-items-center menu-inside-column"></div>
            </div>

            <div class="research-industry-wrap"></div>
        </div>

        <!--京东研究-->
        <div class="flex-row justify-content-between align-items-center research-head-box mt10">
            <div class="research-head-til fs16 ff500">京东研究</div>
            <div class="flex-row research-head-more fs13 ff400" onclick="goIndexReport()">
                <div>更多</div>
                <span class="iconfont iconfanhui fs11"></span>
            </div>
        </div>
        <div class="bg-white flex-column">
            <!--专题列表图-->
            <div class="index-report-special-wrap flex-row mescroll-touch">
                <div class="index-report-special-content flex-row mescroll-touch-x"></div>
            </div>
            <!--研报来源-->
            <div class="index-report-data-sources flex-row mescroll-touch">
                <div class="index-report-data-content flex-row mescroll-touch-x"></div>
            </div>
            <div class="index-report-list flex-column"></div>
        </div>

        <!--语音研报-->
        <div class="flex-row justify-content-between align-items-center research-head-box research-head-jrgs">
            <div class="research-head-til fs16 ff500">语音研报</div>
            <div class="flex-row research-head-more fs13 ff400" onclick="goStockList()">
                <div>更多</div>
                <span class="iconfont iconfanhui fs11"></span>
            </div>
        </div>
        <div class="research-stock-wrap bg-white">
            <div class="research-stock-bg" onclick="goStockList()">
                <img src="../images/research/jrgs@3x.png"/>
            </div>
            <div class="research-stock-box"></div>
        </div>

    </div>
</div>
</body>
<!--下面四个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../js/dict.js"></script>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/checkJsBridge.js"></script>
<script src="../js/utils.js"></script>
<script src="../js/api.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script src="../js/date.js"></script>
<script src="../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../js/template.js"></script>
<script src="../plugin/mescroll/js/mescroll.min.js"></script>

<script>
  let meScroll
  let pm = {
    isScroll: false,
    pageNum: 1,
    pageSize: 9,
    wordParams: [],
    dataSource: '',
    list: [],
    scrollLeft: 0,
    isFirst: true
  }

  function initPage(params) {
    Utils.sbhAdaptive()

    //下拉刷新、滚动加载
    meScroll = Template.createNoScroll({
      id: 'mescroll', //区域ID
      loadImg: '../images/loading.gif',
      pageNum: 1,
      downCallback: reLoadPage, //下拉刷新入口
      upCallback: '' //滚动加载入口
    })
  }

  function startPage(params) {

    getInfoListForResearch(params)
  }

  function reLoadPage() {
    pm.dataSource = ''
    //处理行业专题
    getIndustryTopicList()

    //研报专题列表（目前查詢100个）
    getResearchTopicInfos()

    //获取研报来源
    getWordParam()

    //处理产业链分类
    getIndustryList()

    //处理今日股市
    getStockList()
  }

  // 处理行业专题数据
  function getIndustryTopicList() {
    Server.researchIndex.getIndustryTopicList({
      pageSize: 3,
      pageNum: 1
    }).then(function (data) {
      let htmlStr = ''
      $.each(data.list, function (k, obj) {
        htmlStr += '       <div class="industry-project-item pos-r" onclick="goIndustry(\'' + obj.topicCode + '\')">\n' +
          '                <img src="' + obj.coverImgUrl + '">\n' +
          '            </div>'
      })
      htmlStr += '</div>'

      $('.industry-project-wrap').html(htmlStr)
    })

  }

  function goIndustry(type) {
    jsBridge.openWindow('html/research/industry.html?type=' + type, {}, {noBar: false})
  }

  //处理产业链分类
  function getIndustryList() {
    let htmlStr = '', code = ''
    htmlStr = '<div class="flex-row inside-child">'

    Server.researchIndex.getIndustryList({
      menuCode: '100102'
    }).then(function (data) {

      pm.list = data.data
      let childStr = ''

      $.each(data.data, function (i, item) {
        htmlStr += '  <div class="flex-row ff400 fs12 menu-inside-item ' + (i === 0 ? 'active' : '') + '" id="menuId_' + item.menuCode + '" onclick="getIndustrialChainInfos(this, \'' + item.menuCode + '\')">' + item.menuName + '</div>'

        if (i === 0) {
          childStr = getIndustrialChainInfos(this, item.menuCode)
        }
      })
      htmlStr += '</div>'

      $('.menu-inside-column').html(htmlStr)

      $('.research-industry-wrap').html(childStr)

    })
  }

  //产业链列表处理
  function getIndustrialChainInfos(that, code) {
    $('.menu-inside-item').removeClass('active')
    $('#menuId_' + code).addClass('active')

    //菜单左、右移
    Template.btnLevelMove(that, window.screen.width, 'inside-child', 'active')

    Server.researchIndex.getIndustrialChainInfos({
      menuCode: code,
      pageNum: pm.pageNum,
      pageSize: pm.pageSize
    }).then(function (data) {

      $('.research-industry-wrap').html('')
      let childStr = dealDetailList(data.data, code)
      $('.research-industry-wrap').html(childStr)
    })
  }

  function dealDetailList(list, code) {
    let childStr = ''
    $.each(list, function (k, obj) {
      if (k < 8) {
        childStr += '<div class="flex-column justify-content-center align-items-center research-industry-item" onclick="goIndustrialDetail(\'' + obj.industrialCode + '\',\'' + Utils.dealUndefined(obj.industrialName) + '\')">\n' +
          '                    <img src=' + obj.coverImgUrl + '>\n\n' +
          '                    <div class="line1">' + Utils.dealUndefined(obj.industrialName) + '</div>\n' +
          '                </div>'
      } else if (k === 8) {
        childStr += '<div class="flex-column justify-content-center align-items-center research-industry-item" onclick="goIndustrialMap(\'' + code + '\')">\n' +
          '                    <img src="../images/research/more@3x.png">\n' +
          '                    <div>全部</div>\n' +
          '                </div>'
      }
    })

    return childStr
  }

  function goIndustrialMap() {
    jsBridge.openWindow('html/research/industrial-map.html', {}, {noBar: false})
  }

  function goIndustrialDetail(code, name) {
    jsBridge.openWindow('html/research/industrial-detail.html?menuCode=' + code + '&name=' + name, {}, {noBar: false})
  }

  function goMoreIndustry() {
    jsBridge.openWindow('html/research/industry-topic.html', {}, {noBar: false})
  }

  //查询研报列表
  function getInfoListForResearch(params) {
    Server.researchIndex.getInfoListForResearch({
      pageNum: 1,
      pageSize: 3,
      infoType: 8,
      isRecommend: '',
      dataSource: pm.dataSource
    }).then(function (data) {
      let hei = 0, dom = $('.index-report-list')
      if (data.infoListForResearchs && data.infoListForResearchs.length > 0) {
        dom.html('')
        data.infoListForResearchs.forEach(function (item) {
          item.dataSourceStr = dealSource(item.dataSource)
          let htmlStr = reportList(item)
          dom.append(htmlStr)
          hei += $('.index-report-list').find('#' + item.infoId).outerHeight()
          if (params && item.infoId === params.infoId) {
            //研报专题列表刷新
            $('.readCnt_' + params.infoId).html(params.readCnt)
            $('.commentCnt_' + params.infoId).html(params.commentCnt)
          }
        })
      }

      if (pm.isFirst) {//APP 渲染后不设置高度
        pm.isFirst = false
      } else {
        dom.css({
          height: hei + 'px'
        })
      }

      //下拉刷新结束回调
      meScroll.endSuccess()
    }).catch((error) => {
      meScroll.endErr()
    })
  }

  function reportList(item) {
    let jsonStr = JSON.stringify({
      infoId: item.infoId,
      infoType: item.infoType
    })
    let htmlStr = '<div id="' + item.infoId + '" ><div class=\'flex-column index-report-list-item w-100-p\' onclick=\'goDetail(' + jsonStr + ')\'>'
    htmlStr += '<div class=\'index-report-list-title line1 ff500\'>'
    htmlStr += '<img class="mr5" src=\' https://zzb.jddglobal.com/customer/manager/download/zzb/png/2802aa07-7ebe-49d7-bee0-d871daa7b08f.png \'/>'
    htmlStr += '<span class=\'fs15\'>' + item.mainTitle + '</span>'
    htmlStr += '</div>'
    if (item.trailContent) {
      item.trailContent = item.trailContent.replace(/<[^>]*?>/g, '')
      if (item.trailContent) {
        if (item.trailContent.length > 20) {
          htmlStr += '<div class=\'fs13 index-report-list-tri\'>' + item.trailContent.substring(0, 40) + '...<span>查看详情</span></div>'
        } else {
          htmlStr += '<div class=\'fs13 index-report-list-tri\'>' + item.trailContent + '</div>'
        }
      }
    }
    htmlStr += '<div class=\'index-report-list-time flex-row justify-content-between fs12 \'>'
    htmlStr += '<div>' + DateUtils.formatDate(new Date(item.issuerDttm * 1000), 'yyyy-MM-dd') + '</div>'
    htmlStr += '<div><span class="readCnt_' + item.infoId + '">' + (item.readCnt ? item.readCnt : 0) + '</span>阅读 · '
    htmlStr += '<span class="commentCnt_' + item.infoId + '">' + (item.commentCnt ? item.commentCnt : 0) + '</span>点评'
    htmlStr += '</div></div>'
    htmlStr += '</div></div>'
    return htmlStr
  }

  // 处理来源
  function dealSource(dataSource) {
    let val = ''
    pm.wordParams.forEach(function (item) {
      if (item.paramKey === dataSource) {
        val = item.paramValue
      }
    })
    return val
  }

  // 研报专题列表（目前查詢100个）
  function getResearchTopicInfos() {
    Server.researchIndex.getResearchTopicInfos({
      pageNum: 1,
      pageSize: 5,
      status: 1
    }).then(function (data) {
      let htmlStr = ''
      data.researchTopicInfos.forEach(function (item) {
        htmlStr += '<div class=\'index-report-special-item flex-row  flex-direction-row\' onclick=\'goResearchTopic("' + item.topicCode + '")\' style=\'background:url(' + item.coverImgUrl + ') no-repeat center;background-size: auto 100% \'>'
        htmlStr += '<div class=\'flex-column justify-content-end align-items-end index-report-special-box\'>'
        htmlStr += '<div class=\'index-report-special-item-pdf fs11 \'>PDF</div>'
        htmlStr += '</div>'
        htmlStr += '</div>'
      })
      $('.index-report-special-content').html(htmlStr)
    })

  }

  // 获取研报来源
  function getWordParam() {
    $('.index-report-data-content').stop(true, true).animate({scrollLeft: 0})
    Server.researchIndex.getWordParam({
      paramType: 5,
      status: 1
    }).then(function (data) {
      let htmlStr = '<div class="index-report-tab align-items-center ff500 fs12 index-report-tab-active" style="margin-left:0.32rem;" onclick="goResearch(this, \'\', 0)">全部</div>'
      pm.wordParams = data.sources
      data.sources.forEach(function (item, index) {
        htmlStr += '<div class=\'index-report-tab align-items-center ff400 fs12 \' onclick=\'goResearch(this,' + item.paramKey + ', ' + (index + 1) + ')\'><div>' + item.paramValue + '</div></div>'
      })
      htmlStr += '</div>'
      $('.index-report-data-content').html(htmlStr)
      getInfoListForResearch()
    })
  }

  function goResearchTopic(funcCode) {
    jsBridge.openWindow('html/research/report-special.html?funcCode=' + funcCode, {}, {noBar: false})
  }

  // o 当前对象 code 数据来源编码
  function goResearch(o, code, ind) {
    pm.dataSource = code ? code : ''
    pm.isScroll = false
    pm.pageNum = 1
    $('.index-report-data-content .index-report-tab').removeClass('index-report-tab-active ff500')
    $(o).addClass('index-report-tab-active ff500')

    //菜单左、右移
    Template.btnLevelMove(o, window.screen.width, 'index-report-data-content', 'index-report-tab-active')

    $('.index-report-list').html('')
    getInfoListForResearch()
  }

  function goIndexReport() {
    jsBridge.openWindow('html/research/index-report.html', {}, {noBar: false})
  }

  function goStockList() {
    jsBridge.openWindow('html/home/stock-list.html', {}, {noBar: false})
  }

  //处理今日股市
  function getStockList() {
    Server.researchIndex.getStockList({
      pageNum: 1,
      pageSize: 3,
      funcCode: '100001001'
    }).then(function (data) {
      let htmlStr = ''
      if (data.data && data.data.length > 0) {
        data.data.forEach(function (item) {
          htmlStr += '<div class="flex-row research-stock-item align-items-center" onclick=\'goStockDetail("' + item.voiceId + '", "' + item.infoType + '")\'>' +
            '                    <span class="research-stock-icon iconfont iconerji fs16"></span>\n' +
            '                    <div class="research-stock-title fs15 ff400 line1">' + item.title + '</div>\n' +
            //'                    <span class="iconfont iconsousuo-01 fs13"></span>\n' +
            '                </div>'
        })
      }

      $('.research-stock-box').html(htmlStr)
    })
  }

  // 跳转原生音频详情
  function goStockDetail(infoId, infoType) {
    jsBridge.callBridge('openBrsDetail', {infoId: infoId, infoType: infoType})
  }

  function goSearch() {
    jsBridge.openWindow('html/search/index-search.html', {}, {noBar: false})
  }

</script>
</html>
